<template>
  <div class="orderList">
    <el-card>
      <div slot="header">
        <h2>订单管理</h2>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane
          v-for="(statusItem, index) in statusTabs"
          :key="index"
          :label="statusItem.title"
          :name="statusItem.name"
          class="orderTab"
        >
          <el-row>
            <el-col class="flexCenter" :span="5">
              <span>订单编号:</span>
              <el-input
                clearable
                class="ipts"
                placeholder="订单编号"
                size="small"
                v-model.trim="search.orderId"
              ></el-input>
            </el-col>
            <el-col class="flexCenter" :span="5">
              <span>订单来源:</span>
              <el-select
                class="bot"
                size="small"
                clearable
                v-model="search.channel"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in sourceList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <el-col class="flexCenter" :span="12">
              <span style="width: 100px;">下单时间:</span>
              <div class="time">
                <el-date-picker
                  class="dt"
                  size="small"
                  v-model="orderAllTime"
                  @change="selectTime"
                  type="datetimerange"
                  range-separator=""
                  start-placeholder="请选择时间段"
                ></el-date-picker>
                <span
                  class="to"
                  v-show="search.orderStartTime || search.orderEndTime"
                  >至</span
                >
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col class="flexCenter" :span="5">
              <span>买家姓名:</span>
              <el-input
                clearable
                class="ipts"
                placeholder="请输入姓名"
                size="small"
                v-model.trim="search.userName"
              ></el-input>
            </el-col>
            <el-col class="flexCenter" :span="5">
              <span>手机号:</span>
              <el-input
                clearable
                class="tel"
                placeholder="请输入手机号"
                size="small"
                v-model.trim="search.mobile"
              ></el-input>
            </el-col>
            <el-col
              class="flexCenter"
              :span="5"
              v-show="statusItem.name == '0'"
            >
              <span>订单状态:</span>
              <el-select
                class="bot"
                size="small"
                clearable
                v-model="search.status"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <el-col class="btn" :span="4">
              <el-button size="small" type="primary" @click="goSearch"
                >查询</el-button
              >
            </el-col>
          </el-row>
          <el-table
            v-loading="loading"
            :data="goodsList"
            border
            style="margin-top: 30px"
            :span-method="arraySpanMethod"
            :cell-class-name="addColumnTitle"
          >
            <el-table-column
              align="center"
              prop="mainOrderId"
              label="主订单编号"
              width="154"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="subOrderId"
              label="子订单编号"
              width="186"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="channel"
              label="订单来源"
              width="50"
            >
              <template slot-scope="scope">
                <p class="from">{{ channelType[scope.row.channel] }}</p>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="orderTime"
              label="创建时间"
              width="160"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="orderStatusName"
              label="订单状态"
              width="80"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="goodsMsg"
              label="商品信息"
              width="200"
            >
              <template slot-scope="scope">
                <div class="goodsList">
                  <div
                    class="goodsItem"
                    v-for="(msgItem, index) in scope.row.goodInfos"
                    :key="index"
                  >
                    <div class="goodsItemLeft">
                      <div class="goodsMsg">
                        <p class="goodName">{{ msgItem.goodName }}</p>
                      </div>
                      <p class="goodPrice">￥{{msgItem.goodPrice/100}}</p>
                    </div>
                    <p class="goodCount">{{ msgItem.goodCount }}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="goodsPrice"
              label="单价"
              width="100"
            >
              <template slot-scope="scope">
                <div class="goodsList">
                  <div class="goodsItem" v-for="(item, index) in scope.row.goodInfos" :key="index">
                    <p>￥{{item.goodPrice/100}}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="goodsNum"
              label="数量"
              width="100"
            >
              <template slot-scope="scope">
                <div class="goodsList">
                  <div
                    class="goodsItem"
                    v-for="(item, index) in scope.row.goodInfos"
                    :key="index"
                  >
                    <p>{{ item.goodCount }}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="买家信息"  min-width="100">
              <template slot-scope="scope">
                <div class="userItem" v-if="scope.row.userInfo">
                  <p>{{ scope.row.userInfo.userName }}</p>
                  <p>{{ scope.row.userInfo.phone }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="实收款" width="100">
              <template slot-scope="scope">
                <div class="userItem">
                  <p>￥{{scope.row.orderPrice/100}}</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="text-align: right; margin-top: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.start"
            :page-sizes="page.size"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          ></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import orderApi from "@/api/lejv/order";
import _ from "lodash"; //引入lodash
import { initTime } from "@/utils/index"; //引入时间处理函数
import order from "@/utils/order";
export default {
  name: "order",
  data() {
    return {
      activeName: "0",
      statusTabs: [
        {
          title: "全部",
          name: "0",
        },
        {
          title: "待付款",
          name: "1",
        },
        {
          title: "待发货",
          name: "3",
        },
        {
          title: "已发货",
          name: "4",
        },
        {
          title: "已取消",
          name: "6",
        },
        {
          title: "退款中",
          name: "7",
        },
        {
          title: "已退款",
          name: "8",
        },
        {
          title: "已完成",
          name: "5",
        },
      ],
      statusList: [
        {
          value: "1",
          label: "待付款",
        },
        {
          value: "3",
          label: "待发货",
        },
        {
          value: "4",
          label: "已发货",
        },
        {
          value: "6",
          label: "已取消",
        },
        {
          value: "7",
          label: "退款中",
        },
        {
          value: "8",
          label: "已退款",
        },
        {
          value: "5",
          label: "已完成",
        },
      ],
      sourceList: [
        {
          value: "A",
          label: "健投",
        },
        {
          value: "B",
          label: "拜博",
        },
      ],
      channelType: {
        A: "健投",
        B: "拜博",
      },
      page: {
        start: 1,
        limit: 10,
        total: 10,
        size: [10, 20, 30],
      },
      search: {
        orderId: "",
        status: "",
        channel: "",
        userName: "",
        mobile: "",
        orderStartTime: "",
        orderEndTime: "",
      },
      orderAllTime: [],
      loading: false,
      goodsList: [],
    };
  },
  computed: {
    jSearch() {
      return this.search;
    },
  },
  watch: {
    jSearch: {
      handler(val) {
        // console.log(val)
      },
      deep: true,
    },
  },
  created() {
    this.getList();
    // this.goodsList = order
  },
  mounted() {},
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 5) {
        return [1, 3];
      } else if (columnIndex === 6 || columnIndex === 7) {
        return [0, 0];
      }
    },
    addColumnTitle(row, column, rowIndex, columnIndex) {
      var columnTitle = "";
      // console.log(row.columnIndex)
      if (
        row.columnIndex == 5 ||
        row.columnIndex == 6 ||
        row.columnIndex == 7
      ) {
        columnTitle = "columnTitle";
      }
      return columnTitle;
    },
    handleClick(tab, event) {
      this.search = {
        orderId: "",
        status: "",
        channel: "",
        userName: "",
        mobile: "",
        orderStartTime: "",
        orderEndTime: "",
      };
      if (tab.name != "0") {
        this.search.status = tab.name;
      } else {
        this.search.status = "";
      }
      this.goSearch();
    },
    goSearch() {
      this.page.start = 1
      this.getList()
    },
    selectTime(e) {
      this.search.orderStartTime = e ? initTime(new Date(e[0]).toJSON()) : "";
      this.search.orderEndTime = e ? initTime(new Date(e[1]).toJSON()) : "";
    },
    //获取数据
    getList() {
      this.loading = true;
      // let params = this.search
      let params = {
        pageNum: this.page.start,
        pageSize: this.page.limit,
        ...this.search,
      };
      params = _.pickBy(params, (item) => item); //使用lodash进行过滤参数为空的搜索条件
      // console.log('让我康康', params)
      orderApi
        .getOrderList(params)
        .then((res) => {
          // console.log(res);
          this.loading = false;
          if (res.data) {
            this.goodsList = res.data.orders;
            this.page.total = res.data.totalElements;
          } else {
            this.goodsList = [];
          }
        })
        .catch((res) => {
          // console.log(res);
          // if(res.code != 401 && res.code != 403 && res.code != 500){
          //   this.$message({
          //     type: "error",
          //     message: "网络错误!",
          //   });
          // }
          this.loading = false;
        });
    },
    //分页切换
    handleSizeChange(val) {
      this.page.limit = val;
      this.getList();
    },
    //分页
    handleCurrentChange(val) {
      this.page.start = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss">
.el-date-editor .el-range-input::placeholder {
  text-align: left;
}
.el-date-editor .el-range-input::-webkit-input-placeholder {
  text-align: left;
}
.el-table--enable-row-transition .el-table__body .columnTitle {
  padding: 0;
  .cell {
    padding: 0;
  }
}
.el-loading-mask {
  z-index: 90;
}
</style>
<style scoped lang="scss">
.orderList {
  padding: 20px;
  // ::v-deep.el-table .cell{
  //   display: flex;
  //   justify-content: center;
  // }
  h2 {
    margin: 0;
  }
  .flexCenter {
    display: flex;
    align-items: center;
    margin: 20px 20px 0 0;
    span {
      margin-right: 10px;
      font-size: 14px;
      width: 100px;
    }
    .ipts,
    .bot {
      width: 180px;
    }
    .tel {
      width: 220px;
    }
    // .dt {
    // width: 300px;
    // }
    .time {
      position: relative;
      .to {
        position: absolute;
        left: 186px;
        top: 10px;
        color: #606266;
        font-size: 12px;
        font-family: sans-serif;
      }
    }
  }
  .columnTitle {
    padding: 0;
    background-color: #0f0 !important;
  }
  .from {
    margin: 0;
  }
  .goodsList {
    min-height: 74px;
    .goodsItem {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      // overflow-x: auto;
      border-bottom: 1px solid #ebeef5;
      .goodsItemLeft {
        display: flex;
        align-items: center;
        border-right: 1px solid #ebeef5;
        box-sizing: border-box;
        p {
          margin: 0;
          width: 99px;
          box-sizing: border-box;
          // white-space: nowrap !important;
          padding: 5px 10px 0 10px;
        }
        .goodsMsg {
          min-height: 74px;
          width: 200px;
          border-right: 1px solid #ebeef5;
          display: flex;
          align-items: center;
          .goodName {
            width: 100%;
          }
        }
      }
      .goodCount {
        margin: 0;
        width: 100px;
        border: 0;
        box-sizing: border-box;
        padding: 5px 10px 0 10px;
        // min-height: 74px;
      }
    }
    .goodsItem:last-child {
      border-bottom: 0;
      .goodsItemLeft {
        .goodsMsg {
          .goodName {
            padding-bottom: 5px;
          }
        }
      }
      .goodCount {
        padding-bottom: 5px;
      }
    }
    // .goodsItem::-webkit-scrollbar {
    //   display:none;
    // }
  }
  .userItem {
    p {
      margin: 0;
    }
  }
  .btn {
    text-align: right;
    margin-top: 20px;
    font-size: 20px;
  }
}
</style>
